<template>
  <div
    class="absolute black-bg center color-white"
    style="height: calc(100% - 200px); width: 92%;z-index: 999"
  >
    <div class="flex justify-start flex-wrap full-height align-center">
      <div
        style="height: 50%; width: 25%; padding: 4px"
        @click="goUrl(item)"
        class=""
        v-for="(item, index) in otherSystem"
        :key="index"
      >
        <div
          class="black-bg hover-active pointer hover-border-active relative full-height full-width text-normal hover-scale"
        >
          <img
            :src="item.bgImg"
            alt=""
            class="fullscreen hover-scale-son"
            style="height: calc(100%)"
          />
          <div
            class="absolute full-width flex black-bg align-center justify-center"
            style="left: 0; bottom: 0; height: 50px"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { viewerInherit, contnt } from "@/mixins/cesium";
import sidebar from "@/mixins/sidebar";
import dataLayer from "./dataLayer";
import { deviceDataGetByPosition } from "@/api";
import { pipeline, tagList } from "@/api/mock";
import { generator } from "@/components/Cesium";
import { PM } from "@/components/Cesium/projectMethods";
import { pipelineType, pipelineInfo } from "@/constants/pipeline";
export default {
  name: "contnt",
  mixins: [viewerInherit, sidebar, contnt, dataLayer],
  data() {
    return {
      initialView: {
        lng: 113.25555351666256,
        lat: 23.146792208573846,
        height: 270.089775699012,
        heading: 92.91924246948278,
        pitch: -12.261583653872885,
        roll: 0.000509716953616108
      },
      otherSystem: [
        {
          name: "江夏村项目",
          url: "http://baidu.com",
          bgImg: "/bx-dashboard/imgs/jfang.jpeg"
        },
        {
          name: "重点办项目",
          url: "http://172.18.251.52:9527/bx-dashboard/#/Dashboard/otherSystem",
          bgImg: "/bx-dashboard/imgs/jfang.jpeg"
        },
        {
          name: "白山村项目",
          url: "http://baidu.com",
          bgImg: "/bx-dashboard/imgs/jfang.jpeg"
        },
        {
          name: "住保办项目",
          url: "http://baidu.com",
          bgImg: "/bx-dashboard/imgs/jfang.jpeg"
        },
        {
          name: "房屋鉴定项目",
          url: "http://baidu.com",
          bgImg: "/bx-dashboard/imgs/jfang.jpeg"
        },
        {
          name: "工地管理系统",
          url: "http://baidu.com",
          bgImg: "/bx-dashboard/imgs/jfang.jpeg"
        },
        {
          name: "智能管理系统",
          url: "http://baidu.com",
          bgImg: "/bx-dashboard/imgs/jfang.jpeg"
        },
        {
          name: "风控管理系统",
          url: "http://baidu.com",
          bgImg: "/bx-dashboard/imgs/jfang.jpeg"
        }
      ]
    };
  },
  computed: {
    mapCenter() {
      return this.$store.state.mapControl.center;
    },
    mapHeight() {
      return this.$store.state.mapControl.height;
    },
    pipelineType,
    pipelineInfo,
    showThemes() {
      return this.dataLayer.tagThemes?.filter(i => i.show).map(i => i.id) || [];
    },
    tagGroup() {
      if (!this.dataLayer.tagList) return [];
      return this.dataLayer.tagList
        .filter(tag => {
          return this.showThemes.includes(tag.themeId);
        })
        .map(PM.billboardFromTagInfo);
    }
  },
  created() {},
  mounted() {
    // this.registerOnce([this.getTags]);
    this.flyToInitialView();
  },
  methods: {
    goUrl(item) {
      window.open(item.url);
    },

    fillDialog() {
      this.dataLayer.dialog = true;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/buttons.scss";
</style>
